<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <ContainerSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain size="small" icon="PlusOutlined" @click="addServiceContainer()">添 加</el-button>
            <el-button type="primary" plain size="small" icon="SyncOutlined" @click="batchRestartContainer()">批量重启服务</el-button>
        </div>
        <div>
            <el-table
                :data="serviceContainerDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
                @selection-change="batchRestartSelect"
                ref="containerRef"
                v-loading="tableSearchLoading"
            >
                <el-table-column type="selection" width="45" />
                <el-table-column prop="dockerName" label="容器名称" />
                <el-table-column prop="dockerContainerId" label="容器ID" />
                <el-table-column prop="dockerImageId" label="镜像ID" />
                <el-table-column prop="dockerGitPath" label="容器git拉取地址" />
                <el-table-column prop="dockerNetworkMode" label="容器网络模式" />
                <el-table-column prop="dockerSourcePort" label="容器原始端口" />
                <el-table-column prop="dockerDestPort" label="容器目标端口" />
                <el-table-column prop="dockerSourceVolume" label="容器原始挂载路径" />
                <el-table-column prop="dockerDestVolume" label="容器目标挂载路径" />
                <el-table-column prop="dockerCmd" label="容器启动命令" />
                <el-table-column prop="dockerServiceAddress" label="容器所属服务IP" />
                <el-table-column prop="dockerServicePort" label="容器所属服务端口" />
                <el-table-column prop="applicationName" label="容器关联微服务" />
                <el-table-column align="center" width="400">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="success" @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                        <el-button type="primary" plain size="small" @click="handleAppLog(scope.$index, scope.row)">日 志</el-button>
                        <el-button type="warning" size="small" @click="handleDeploy(scope.$index, scope.row)">一键部署</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <div>
        <ContainerAddOrUpdateDialog :containerForm="containerForm" :title="title"/>
        <ContainerDeleteDialog :containerForm="containerForm" />
        <ContainerSimpleDeployDialog :containerForm="containerForm" />
        <ContainerAppLogDialog ref="appLogDialog"/>
    </div>
</template>

<script name="ContainerManage" setup lang="ts">
import ContainerSearch from '@/components/containerManage/ContainerSearch.vue'
import ContainerAddOrUpdateDialog from "@/components/containerManage/ContainerAddOrUpdateDialog.vue";
import ContainerDeleteDialog from "@/components/containerManage/ContainerDeleteDialog.vue";
import ContainerSimpleDeployDialog from "@/components/containerManage/ContainerSimpleDeployDialog.vue";
import ContainerAppLogDialog from "@/components/containerManage/ContainerAppLogDialog.vue";
import {createTag} from "@/utils/ywuCommon";
import {containerAppLogList, containerInfoQuery, containerRestartInfo} from "@/request/container";
import {ElNotification, TableInstance} from "element-plus";
import {computed, ref} from "vue";
import {useServiceContainerStore} from "@/stores/container/container";
import {useRoute} from "vue-router";
import {useContainerLogStore} from "@/stores/container/containerLog";

let containerForm = ref({
    id: '',
    dockerName: '',
    dockerContainerId: '',
    dockerImageId: '',
    dockerGitPath: '',
    dockerNetworkMode: '',
    dockerSourcePort: '',
    dockerDestPort: '',
    dockerSourceVolume: '',
    dockerDestVolume: '',
    dockerCmd: '',
    dockerServiceAddress: '',
    dockerServicePort: '',
    serviceId: '',
    volumeList: [],
    cmdList: []
});
let title = ref("");
let restartBachData = ref([]);
let tableSearchLoading = ref(false);

let serviceContainerDataList = computed(() => {return useServiceContainerStore().serviceContainerDataList});
let serviceContainerSearchData = computed(() => {return useServiceContainerStore().serviceContainerSearchData});

tableSearchLoading.value = true;
containerInfoQuery(serviceContainerSearchData.value).then(res => {
    if (res["code"] === '200') {
        useServiceContainerStore().resetServiceContainerDataList(res.data);
    }
    tableSearchLoading.value = false;
}).catch(res => {
    tableSearchLoading.value = false;
})

// 创建标签
let route = useRoute();
createTag(route);

function addServiceContainer() {
    title.value = "添加容器";
    containerForm.value = {
        id: '',
        dockerName: '',
        dockerContainerId: '',
        dockerImageId: '',
        dockerGitPath: '',
        dockerNetworkMode: '',
        dockerSourcePort: '',
        dockerDestPort: '',
        dockerSourceVolume: '',
        dockerDestVolume: '',
        dockerCmd: '',
        dockerServiceAddress: '',
        dockerServicePort: '',
        serviceId: '',
        volumeList: [],
        cmdList: []
    }
    useServiceContainerStore().resetAddOrUpdateDialog(true);
}

function buildVolumeList(sourceVolume, destVolume) {
    // 构建volumeList
    let sourceList = sourceVolume.split(",")
    let destList = destVolume.split(",")
    let tempList = []
    for (let index = 0; index < sourceList.length; index++) {
        tempList.push({
            id: index + 1,
            source: sourceList[index],
            dest: destList[index]
        })
    }
    return tempList;
}

function handleUpdate(index, row) {
    title.value = "修改容器";
    let volumeList = buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
    containerForm.value = {
        id: row.id,
        dockerName: row.dockerName,
        dockerContainerId: row.dockerContainerId,
        dockerImageId: row.dockerImageId,
        dockerGitPath: row.dockerGitPath,
        dockerNetworkMode: row.dockerNetworkMode,
        dockerSourcePort: row.dockerSourcePort,
        dockerDestPort: row.dockerDestPort,
        dockerSourceVolume: row.dockerSourceVolume,
        dockerDestVolume: row.dockerDestVolume,
        dockerCmd: row.dockerCmd,
        dockerServiceAddress: row.dockerServiceAddress,
        dockerServicePort: row.dockerServicePort,
        serviceId: row.serviceId,
        volumeList: volumeList,
        cmdList: row.cmdList
    }
    useServiceContainerStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, row) {
    let volumeList = buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
    containerForm.value = {
        id: row.id,
        dockerName: row.dockerName,
        dockerContainerId: row.dockerContainerId,
        dockerImageId: row.dockerImageId,
        dockerGitPath: row.dockerGitPath,
        dockerNetworkMode: row.dockerNetworkMode,
        dockerSourcePort: row.dockerSourcePort,
        dockerDestPort: row.dockerDestPort,
        dockerSourceVolume: row.dockerSourceVolume,
        dockerDestVolume: row.dockerDestVolume,
        dockerCmd: row.dockerCmd,
        dockerServiceAddress: row.dockerServiceAddress,
        dockerServicePort: row.dockerServicePort,
        serviceId: row.serviceId,
        volumeList: volumeList,
        cmdList: row.cmdList
    }
    useServiceContainerStore().resetDeleteDialog(true);
}

function handleDeploy(index, row) {
    let volumeList = buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
    containerForm.value = {
        id: row.id,
        dockerName: row.dockerName,
        dockerContainerId: row.dockerContainerId,
        dockerImageId: row.dockerImageId,
        dockerGitPath: row.dockerGitPath,
        dockerNetworkMode: row.dockerNetworkMode,
        dockerSourcePort: row.dockerSourcePort,
        dockerDestPort: row.dockerDestPort,
        dockerSourceVolume: row.dockerSourceVolume,
        dockerDestVolume: row.dockerDestVolume,
        dockerCmd: row.dockerCmd,
        dockerServiceAddress: row.dockerServiceAddress,
        dockerServicePort: row.dockerServicePort,
        serviceId: row.serviceId,
        volumeList: volumeList,
        cmdList: row.cmdList
    }
    useServiceContainerStore().resetDeployDialogVisible(true);
}

function handleCopy(index, row) {
    title.value = "添加容器";
    let volumeList = buildVolumeList(row.dockerSourceVolume, row.dockerDestVolume)
    containerForm.value = {
        id: '',
        dockerName: row.dockerName,
        dockerContainerId: row.dockerContainerId,
        dockerImageId: row.dockerImageId,
        dockerGitPath: row.dockerGitPath,
        dockerNetworkMode: row.dockerNetworkMode,
        dockerSourcePort: row.dockerSourcePort,
        dockerDestPort: row.dockerDestPort,
        dockerSourceVolume: row.dockerSourceVolume,
        dockerDestVolume: row.dockerDestVolume,
        dockerCmd: row.dockerCmd,
        dockerServiceAddress: row.dockerServiceAddress,
        dockerServicePort: row.dockerServicePort,
        serviceId: row.serviceId,
        volumeList: volumeList,
        cmdList: row.cmdList
    }
    useServiceContainerStore().resetAddOrUpdateDialog(true);
}

function handleAppLog(index, row) {
    useContainerLogStore().resetContainerId("");
    useContainerLogStore().resetAppLogFileList([]);
    useContainerLogStore().resetSearchLoading(true);
    // 查询数据
    containerAppLogList(row).then(res => {
        useContainerLogStore().resetContainerId(row.dockerContainerId);
        useContainerLogStore().resetAppLogFileList(res.data);
        useContainerLogStore().resetSearchLoading(false);
    })
    useContainerLogStore().resetAppLogDialogDialogFlag(true);
}

function batchRestartSelect(val) {
    restartBachData.value = val;
}

let containerRef = ref<TableInstance>();
function batchRestartContainer() {
    containerRestartInfo(restartBachData.value).then(res => {
        if (res["code"] === '200') {
            ElNotification({
                title: 'Success',
                message: res["message"],
                type: 'success'
            });
            containerRef.value.clearSelection()
        }
    })
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>